<script setup>
const links = [
	[
		{
			label: 'Интернет-запись',
			icon: 'i-heroicons-calculator',
			to: '/call'
		},
		{
			label: 'Режим работы',
			icon: 'i-heroicons-calculator',
			to: '/call/graph'
		},
	],
	[
		{
			label: 'Выход',
			icon: 'i-heroicons-arrow-uturn-down',
			to: '/login'
		},
	]
]
</script>

<template>
	<div>
		<header>
			<!-- <div class="flex flex-row p-2 gap-2">
				<div>
					<UButton @click="navigateTo('/call')" label="Интернет-запись" />
				</div>
				<div>
					<UButton @click="navigateTo('/call/graph')" label="Режим работы" />
				</div>
			</div> -->
			<slot name="header">
				<UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800 " />
				<br>
			</slot>
		</header>
		<main>
			<slot />
		</main>
	</div>
</template>

<style scoped>
.sticky-header {
	position: sticky;
	top: 0;
	background-color: white;
	/* или другой цвет фона */
	z-index: 51;
	/* чтобы обеспечить, что элемент находится над другими */
}
</style>